<script setup>
import { addInfo, isFriend, middlePage, rightPage } from '../../stores/page'
import { getFriendHeadShot } from '../../stores/getFriend'
import { useChatRecordingStore } from '@/stores/chatRecording';
import { setFriendInfo } from '../../stores/friend';
import { ref } from 'vue'
import { ElDrawer, ElMessageBox, ElMessage } from 'element-plus'
import { userId } from '../../stores/user'
import axios from 'axios'
import { format } from 'date-fns'



let timer


const dialog = ref(false)
const loading = ref(false)



const cancelForm = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
        dialog.value = false
    }, 400)
}

const handleClose = (done) => {
    if (loading.value) {
        return
    }
    ElMessageBox.confirm('是否退出申请', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            loading.value = true
            timer = setTimeout(() => {
                done()
                // 动画关闭需要一定的时间
                setTimeout(() => {
                    loading.value = false
                }, 400)
            }, 2000)
        })
        .catch((error) => {
            console.log(error)
        })
}

const onClick = () => {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
    //发送好友申请
    axios({
        method : 'post',
        url : 'https://47.120.69.214:8787/friendApply/addApply',
        data:{
            "userId1" : userId.value,
            "userId2" : addInfo.value.id,
            "content" : input.value
        },
        headers : {
            "Content-Type" : "application/json"
        }
    })
    .then(response => {
        ElMessage.success('发送成功')
    })
    .catch(error => {
        console.log(error)
    })
}
//获取聊天记录与好友信息
const chatRecordingStore = useChatRecordingStore();
//好友申请
const input = ref('')

function toggleSendInterface(item) {
    middlePage.value = 1
    //将聊天好友的信息储存到会话储存中
    sessionStorage.setItem('friend', JSON.stringify(item));
    //更改会话的好友信息
    setFriendInfo()
    //获取聊天记录
    chatRecordingStore.getChatRecordingList();
    rightPage.value = 1
}

function addFriend() {
    dialog.value = true
}

</script>

<template>

    <el-card
        style="width: 65vw; height : 99vh; position : fixed; top : 0; left : 34.5%; background-color :rgb(239, 236, 229);">
        <template #header>
            <div class="card-header">
                <el-avatar shape="square" :size="90" :src="getFriendHeadShot(addInfo.headShotUrl)"
                    style="margin-left:-85%" />
                <!-- <span style='position: absolute; top: 3.3%; left: 20%;font-size:40px'>{{ addInfo.name }}</span> -->
            </div>
        </template>
        <div class="card-body" style="margin-bottom:20%">
            <el-card style="width: 60vw; text-align:left; margin-bottom:5%; font-size:20px" shadow="always">昵称: {{
                addInfo.name
                }}</el-card>
            <el-card style="width: 60vw; text-align:left; margin-bottom:5%; font-size:20px" shadow="always" 
            v-if="addInfo.birthday !== null">生日: {{ format(addInfo.birthday, 'yyyy-MM-dd') }}</el-card>
            <el-card style="width: 60vw; text-align:left; margin-bottom:5%; font-size:20px" shadow="always" 
            v-else>生日: </el-card>
            <el-card style="width: 60vw; text-align:left; margin-bottom:5%; font-size:20px" shadow="always">性别: {{ 
            addInfo.gender}}</el-card>
                <el-card style="width: 60vw; text-align:left; font-size:20px" shadow="always" v-if="isFriend === true">
                    电话号码: {{ addInfo.phone }}</el-card>
        </div>
        <template #footer>
            <div v-if="isFriend === true">
                <el-button type="success" @click="toggleSendInterface(addInfo)"
                    style="width:20vw;height:8vh;font-size:20px; margin-top:-20%;">发送信息</el-button>
            </div>
            <div v-else>
                <el-button type="success" @click="addFriend()"
                    style="width:20vw;height:8vh; font-size:20px">添加好友</el-button>
            </div>
        </template>
    </el-card>
    <el-drawer v-model="dialog" title="好友申请" :before-close="handleClose" direction="ltr" class="demo-drawer">
        <el-input v-model="input" maxlength="50" style="width: 25vw;" placeholder="好友申请" show-word-limit :rows="5"
            type="textarea" />
        <div style="margin: 10% 0"></div>
        <el-button type="primary" @click="onClick">发送申请</el-button>
        <el-button :loading="loading" @click="cancelForm" style="margin-left:15%;">
            {{ loading ? '退出申请 ...' : '退出申请' }}
        </el-button>
    </el-drawer>

</template>

